/*
    组件 添加医院 或者 更新医院
*/ 
import { Card, Button, Form, Input, message } from 'antd'
import { reqAddHospital, reqGetHospital, reqUpdateHospital } from '@api/hospital/hospitalSet'
import { ReqAddHospitalParams } from '@api/hospital/model/hospitalSetTypes'
import { useNavigate, useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'

/*
    在表单中，可以有 wrapperCol 和 lableCol    Column  列
    表示方式 { span : 4, offset: 2 }
    span 表示的宽度比例，offset 表示偏移的比例 
    总的列数量是 24
*/
export default function AddOrUpdateHospital(){

    // 声明一个loading状态
    const [loading, setLoading] = useState(false)

    // 声明一个编程式导航的 navigate 方法
    const navigate = useNavigate()

    async function onFinish (values: ReqAddHospitalParams) {
        // 只有当所有的内容都有值的时候才会进行添加
        // 从专业的开发角度来看，有可能会出现网络错误，或者其他错误
        try {
            setLoading(true);

            // 如果有id，那么发起的就是编辑请求，没有id则是添加请求
            if(id) {
                // 修改
                await reqUpdateHospital({
                    ...values,
                    // id 要求是数值类型
                    id: +id
                })
            } else {
                await reqAddHospital(values)
            }

            // 一般情况都是需要在响应体中解构message，动态提示
            const str = id ? '修改' : '添加';
            message.success(str + '医院成功！')
            setLoading(false);
            // 如果都已经成功了，那么应该跳转到列表页了, 不需要返回
            navigate('/syt/hospital/hospitalset', { replace: true })
        }catch(err: any) {
            // 用专门的组件来提示
            message.error(err);
            setLoading(false);
        }
    }

    /*
        编译页面的代码 -------------------------
    */
    // 获取地址栏中的查询信息
    const {id} = useParams();
    const [form] = Form.useForm()

    async function getHospitalItem() {
        if(id) {
            // 通过地址栏获取的id是字符串类型，但是要求传入的是number类型
            const result = await reqGetHospital(+id)
            // 表单form对象，有一个同步数据的方法  setFieldsValue(result)
            // console.log(result);
            form.setFieldsValue(result)
        }
    }

    useEffect(() => {
        getHospitalItem()
    }, [])

    return (
        <Card>
            {/* 表单的布局 - style={{ width: 580 }} */}
            <Form 
                form={form}
                wrapperCol={{ span: 13 }}
                labelCol={{ span: 4 }}
                onFinish={onFinish}
            >
                {/* rules 代表规则，可以有多个 - 一定要配合name使用 */}
                <Form.Item label="医院名称" name="hosname" rules={
                    [
                        // 必填项
                        { required: true, message: '医院名称没有写喔~' }
                    ]
                }>
                    <Input placeholder='请输入医院名称' />
                </Form.Item>
                <Form.Item label="医院编号" name="hoscode" rules={
                    [{ required: true, message: '医院编号没有写喔~' }]
                }>
                    <Input placeholder='请输入医院编号' />
                </Form.Item>
                <Form.Item label="api基础路径" name="apiUrl" rules={
                    [{ required: true, message: 'api基础路径没有写喔~' }]
                }>
                    <Input placeholder='请输入api基础路径' />
                </Form.Item>
                <Form.Item label="联系人姓名" name="contactsName" rules={
                    [{ required: true, message: '联系人姓名没有写喔~' }]
                }>
                    <Input placeholder='请输入联系人姓名' />
                </Form.Item>
                <Form.Item label="联系人手机" name="contactsPhone" rules={
                    [
                        // 如果有额外的验证需求，那么可以写正确的规则
                        { required: true, message: '联系人手机没有写喔~' },
                        { 
                            pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, 
                            message: '请输入正确的手机号！' 
                        }
                    ]
                }>
                    <Input placeholder='请输入联系人手机' />
                </Form.Item>
                
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button 
                        type='primary'
                        htmlType='submit'
                        loading={loading}
                    >保存</Button>
                    <Button 
                        className='ml'
                        onClick={() => navigate(-1)}
                    >返回</Button>
                </Form.Item>
            </Form>
        </Card>
    )
}